<div class='panel panel-primary'>
    <div class='panel-heading'>
        {{ pageTitle }}
    </div>
    <!-- Filter the Products   -->
    <div class='panel-body'>
        <div class='row'>
            <div class='col-md-2'>Filter by:</div>
            <div class='col-md-4'>
                <input type='text' [(ngModel)]='listFilter' />
            </div>
        </div>
        <div class='row'>
            <div class='col-md-6'>
                <h3>Filtered by: {{listFilter}}</h3>
            </div>
        </div>
        <div class='table-responsive'>
            <table class='table' *ngIf='products && products.length'>
                <thead>
                    <tr>
                        <th>
                            <button class='btn btn-primary' (click)='toggleImage()'>
                                {{ btnImageTxt }}
                            </button>
                        </th>
                        <th>Product</th>
                        <th>Code</th>
                        <th>Available</th>
                        <th>Price</th>
                        <th>5 Star Rating</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor='#product of products | productListFilter:listFilter'>
                        <td>
                            <img *ngIf='showImage'
                                 [src]='product.imageUrl' 
                                 [title] = 'product.productName'
                                 [style.width.px] = 'imageWidth'
                                 [style.margin.px] = 'imageMargin' 
                                 class="img-thumbnail img-responsive" />
                        </td>
                        <td> <a [routerLink]="['ProductDetail', { id: product.productId }]"> {{ product.productName }} </a> </td>
                        <td> {{ product.productCode | lowercase }} </td>
                        <td> {{ product.releaseDate }} </td>
                        <td> {{ product.price | currency:'USD':true:'1.2-2' | lowercase }} </td>
                        <td>
                            <ai-star [rating]='product.starRating' 
                                     (ratingClicked)='onRatingClicked($event)'>
                            </ai-star>
                        </td>                        
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>